<template>
  <div class="hello">
    父亲：{{msg}}
    <p> <child1 :data="msg" @howMuch='things'></child1> </p>

    <child>
      <p slot="header">我是头部</p>
      <p slot="bottom">我是底部</p>
    </child>
  </div>
</template>

<script>
import child from "./child";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: 200
    };
  },

  methods: {
    things(val) {
      this.msg = val;
    }
  },
  components: {
    child1: {
      props: ["data"],
      template: `<div class="child">孩子：{{data}}
        <button @click="more()">多要点</button>
      </div>`,
      methods: {
        more() {
          this.$emit("howMuch", 300);
        }
      }
    },
    child
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only 


-->

<style>
.hello {
  background: pink;
}
</style>
